<template>
    <div class="pl-container">
        <!--顶部滑动条区域-->
        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active">全部</a>
						<!-- <a :class="['mui-control-item', index == 0 ? 'mui-active' : '']"  -->
					    <a :class="['mui-control-item']"
						v-for="(item, index) in cates" :key="index">
						  {{ item.title }}
						</a>
					</div>
				</div>
        </div>
		<!--图片列表区域-->
		<ul class="photo-list">
			<router-link  v-for="(item,index) in cates" :key="index" :to="'/home/photoinfo/' + index" tag="li">
				<img v-lazy="item.picUrl">
				<div class="info">
					<h1 class="info-title">{{item.description}}</h1>
					<div class="info-body">{{item.title}}</div>
				</div>
			</router-link>
		</ul>
    </div>
</template>

<script>
//import '../../../node_modules/zrender/lib/core/event.js'
//导入MUI的js文件
import mui from '../../lib/mui/js/mui.js'
//window.addEventListener('touchmove', func, { passive: false })
//初始化mui的滑动控件
// mui('.mui-scroll-wrapper').scroll({
//     deceleration: 0.0005   //flick 减速系数 系数越大滚动速度越慢,滚动距离越小
// })
export default {
    data(){
        return {
			key: '2667587171c7012add10a01160b7216c',
			cates: []    //所有分类的列表数组
		}
	},
	created() {
		this.getAllCategory()
	},
	mounted() {
		//初始化mui的滑动控件
	    mui('.mui-scroll-wrapper').scroll({
			
            deceleration: 0.0005   //flick 减速系数 系数越大滚动速度越慢,滚动距离越小
		}) 
		
    },
    methods: {
		getAllCategory() {
			this.$http.get("http://api.tianapi.com/meinv/index?key=" + this.key + "&num=10" )
			.then(result => {
				console.log(result.body)
				if(result.body.code == 200) {
					//result.body.newslist.unshift({ title: '全部', ctime: '2020-05-18 22:00', })
					this.cates = result.body.newslist
				}
			})
			//  let _this = this
            // _this.$axios.get('https://www.easy-mock.com/mock/5c36b5d2be0a1c39bfd57589/img/beauty/page=' + _this.pageIndex)
            // .then(function (response) {
            // console.log(response.data)
            // _this.cates = response.data
            // })
            // .catch(function (err) {
            //  Toast(err)
            // })

		}
		// getPhotoByTitle(title) {

		// }

    }
   
}
</script>

<style lang="scss" scoped>
*{
	touch-action: pan-y;
}
.photo-list{
	  list-style: none;
	  margin: 0;
	  padding: 10px;
      padding-bottom: 0;
     li{
		    background-color: #ccc;
			text-align: center;
			margin-bottom: 10px;
			box-shadow: 0 0 6px;
			position: relative;

			img{
				width: 100%;
				vertical-align: middle;
			}
			img[lazy="loading"] {
			width: 40px;
			height: 300px;
			margin: auto;
            }

			.info{

				color: white;
                text-align: left;
				position: absolute;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.2);
				.info-title{
                     font-size: 14px;
				}
				.info-body{
                     font-size: 12px;
				}

			}

	 }
}  

</style>